<!doctype html>
<html lang="en">
  <head>
    <script src="../../helpers/header.js" type="module"></script>
    <script src="./index.js" type="module"></script>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="container text-center">
      <dialog id="dialogPopup">
        <section id="dialogContainer">
          <!-- Dialog Header -->
          <header>
            <h2>Modal Heading</h2>
            <button class="closeDialog" id="closeIcon">&#x2715;</button>
          </header>
          <!-- Dialog Body -->
          <div class="dialogContent">
            This is modal content. You can put any content here. This has a groovy backdrop!
            <br />
            You can also close this modal by clicking outside of it or pressing the escape key
          </div>
          <footer>
            <button class="closeDialog">Close</button>
          </footer>
        </section>
      </dialog>
      <div>
        <div class="option">
          <label for="closeOnOutsideClick">Close dialog on outside click</label>
          <input type="checkbox" class="optionCheckbox" checked id="closeOnOutsideClick" />
        </div>
        <div class="option">
          <label for="closeOnEscape">Close dialog on escape</label>
          <input type="checkbox" class="optionCheckbox" checked id="closeOnEscape" />
        </div>
        <div class="option">
          <label for="hasCloseButton">Show close icon</label>
          <input type="checkbox" class="optionCheckbox" checked id="hasCloseButton" />
        </div>
        <div class="option">
          <label for="hasBackdrop">Show backdrop</label>
          <input type="checkbox" class="optionCheckbox" checked id="hasBackdrop" />
        </div>
      </div>
      <button id="showDialog">Show Dialog</button>
    </div>
  </body>
</html>
